<template>
  <div id='list'>
    <el-table
      :data="listData"
      style="width: 100%; background: transparent; font-size: 20px;"
      :row-class-name="tableRowClassName"
      :header-cell-style="tableHeaderColor"
      :show-header="hasTitle"
      :border='false' rules=none cellspacing=0
      :cell-style="cellStyle"
      id="listTable"
      >
      <el-table-column
        type="index"
        label=""
        class="table_index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        prop="locationName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="role"
        label="身份"
        width="150">
      </el-table-column>
      <el-table-column
        prop="time"
        label="识别时间"
        >
      </el-table-column>
       <el-table-column
        prop="ratio"
        label="相似度"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  props: {
    listData: {
      type: Array,
      required: true
    },
    hasTitle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableScrolL: null
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.tableInterval()
    })
  },
  beforeDestroy() {
  },
  methods: {
    change() {
      let table = $('tbody')
      // let table = $('.el-table__body')
      let tableRow = $('.el-table__row')
      let lineHeight = tableRow.length
      let row = table.insertRow(lineHeight)
      for (let j = 0; j < table.rows[0].cells.length; j++) {
        var cell = row.insertCell(j)
        cell.height = '24px'
        cell.innerHTML = table.rows[0].cells[j].innerHTML
        table.deleteRow(0)
      }
    },
    tableInterval() {
      // this.tableScrolL = setInterval(() => {
        this.change()
      // }, 1000)
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        return 'color: #047cc9;font-size: 20px;'
      }
      if (columnIndex === 3) {
        return 'color: #939daa;font-size: 20px;'
      }
      if (columnIndex === 4) {
        return 'color: #a7a56d;font-size: 20px;'
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'even-row'
      } else if (rowIndex % 2 === 1) {
        return 'odd-row'
      }
      return ''
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #082840;color: #fff; border-color:none;'
      }
    },
    indexMethod(index) {
      return index + 1
    }
  }
}
</script>

<style lang='scss' scoped>

.list{
  width: 958px;
  height: 500px;
  border: 1px solid #047cc9;
  background: #09182a;
  overflow: hidden;
  .el-table .odd-row {
    background: #09182a;
    height: 56px;
    line-height: 56px;
  }
  .el-table .even-row {
    background:rgba(0, 178, 255, 0.02);
    height: 56px;
    line-height: 56px;
  }
}
</style>
